<style lang="less">
     @import './index.less';
</style>


<template>
  <div>
    <Button icon="reply" type="text" @click="goForward">上一步</Button>
    <Card>
      <Row>
        <i-col span="18">
          <div style="padding:10px">
            <h2>{{employeeMes.employee_name}}
              <Tag color="blue" type="border" class="margin-left-10 margin-bottom-8">{{employeeMes.status}}</Tag>
            </h2>
            <p>部门：{{employeeMes.org_name}}</p>
            <p>职位：{{employeeMes.position_name}}</p>
          </div>
        </i-col>
        <i-col span="6" class="margin-top-15">
          <modifyDetailBtn @modifyClick="modify(employeeMes.employee_id)"></modifyDetailBtn>
        </i-col>
      </Row>
    </Card>
    <Row :gutter="10" class="margin-top-10">
      <i-col span="17">
        <Card dis-hover>
          <Tabs value="1">
              <TabPane label="入职信息" name="1">
                <div class="box">
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>职级：{{employeeMes.rank}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>编制：{{employeeMes.organization}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>入职时间：{{employeeMes.entrydate}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>转正时间：{{employeeMes.formaldate}}</span>
                    </i-col>
                  </Row>
                </div>
              </TabPane>
              <TabPane label="个人信息" name="2">
                <div class="box">
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>国籍：{{employeeMes.nationality}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>手机号：{{employeeMes.phone_num}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>身份证号：{{employeeMes.id_number}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>籍贯：{{employeeMes.origins}}</span>
                    </i-col>
                  </Row>
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>性别：{{employeeMes.sex}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>出生日期：{{employeeMes.birth}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>司龄：{{employeeMes.division_time}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>民族：{{employeeMes.nation}}</span>
                    </i-col>
                  </Row>
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>年龄：{{employeeMes.age}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>QQ号：{{employeeMes.qq_num}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>政治面貌：{{employeeMes.political_status}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>婚否：{{employeeMes.married}}</span>
                    </i-col>
                  </Row>
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>身份证地址：{{employeeMes.id_card_address}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>现家庭地址：{{employeeMes.current_address}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>户口性质：{{employeeMes.registered_nature}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>私人邮箱：{{employeeMes.personal_email}}</span>
                    </i-col>
                  </Row>
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>公司邮箱：{{employeeMes.company_email}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>户口所在地：{{employeeMes.registered_address}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>紧急联系人：{{employeeMes.emergency_contact}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>与紧急联系人关系：{{employeeMes.emergency_relationship}}</span>
                    </i-col>
                  </Row>
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>紧急联系人电话：{{employeeMes.emergency_phone}}</span>
                    </i-col>
                  </Row>
                </div>
              </TabPane>
              <TabPane label="教育信息" name="3">
                <div class="box">
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>最高学历：{{employeeMes.diploma_highest}}</span>
                    </i-col>
                  </Row>
                  <Row :gutter=10 v-for="(item,index) in employeeMes.educations" :key="index">
                    <i-col span="6">
                      <span>教育开始时间：{{item.start}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>教育结束时间：{{item.end}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>学习形式：{{item.modality}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>学校：{{item.school}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>院系：{{item.college}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>专业：{{item.major}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>学历：{{item.diploma}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>学位：{{item.degree}}</span>
                    </i-col>
                  </Row>
                </div>
              </TabPane>
              <TabPane label="工作履历" name="4">
                <div class="box">
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>参加工作日期:{{employeeMes.join_work_date}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>工作年限：{{employeeMes.work_time}}</span>
                    </i-col>
                  </Row>
                  <Row :gutter=10 v-for="(item,index) in employeeMes.workhistories" :key="index">
                    <i-col span="6">
                      <span>开始时间:{{item.start}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>结束时间：{{item.end}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>单位名称：{{item.company_name}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>任职岗位：{{item.position_name}}</span>
                    </i-col>
                  </Row>
                </div>
              </TabPane>
              <TabPane label="证书管理" name="5">
                <div class="box">
                  <Row :gutter=10 v-for="(item,index) in employeeMes.certificates" :key="index">
                    <i-col span="8">
                      <span>证书信息:{{item.certificate_name}}</span>
                    </i-col>
                    <i-col span="8">
                      <span>职称:{{item.certificate_position}}</span>
                    </i-col>
                    <i-col span="8">
                      <span>备注:{{item.remark}}</span>
                    </i-col>
                  </Row>
                </div>
              </TabPane>
              <TabPane label="银行卡信息" name="6">
                <div class="box">
                  <Row :gutter=10>
                    <i-col span="6">
                      <span>工资卡:{{employeeMes.wage_card_number}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>工资卡开户行:{{employeeMes.wage_card_bank}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>报销卡:{{employeeMes.reimbursement_card_number}}</span>
                    </i-col>
                    <i-col span="6">
                      <span>报销卡开户行:{{employeeMes.reimbursement_card_bank}}</span>
                    </i-col>
                  </Row>
                </div>
              </TabPane>
              <TabPane label="合同信息" name="7">
                <div class="box">
                  <Row :gutter=10 v-for="(item,index) in employeeMes.contracts" :key="index">
                    <i-col span="8">
                      <span>签订日期:{{item.start}}</span>
                    </i-col>
                    <i-col span="8">
                      <span>签订年限:{{item.duration}}</span>
                    </i-col>
                    <i-col span="8">
                      <span>终止日期:{{item.end}}</span>
                    </i-col>
                  </Row>
                </div>
              </TabPane>
          </Tabs>
        </Card>
      </i-col>
      <i-col span="7">
        <Card dis-hover>
          <Tabs>
            <TabPane label="任职动态">
              <p>这里是有关该职员的职务变动情况</p>
            </TabPane>
          </Tabs>
        </Card>
      </i-col>
    </Row>
    
    <Modal v-model="modifyModal" title="修改员工信息" width="1000" ok-text="修改"  @on-ok="submitModify('modifyFormValidate')" @on-cancel="cancel" :loading="modifyModalLoading">
          <Tabs value="tab1">
              <TabPane label="入职信息" name="tab1">
                <Form ref="modifyFormValidate" :rules="ruleValidate" :model="modifyForm" label-position="right" :label-width="100">
                 
                  <Row >
                    <i-col span="8">
                      <FormItem label="姓名" prop="employee_name">
                        <Input type="text" v-model="modifyForm.employee_name">
                        </Input>
                        <p style="color:#ed4014" v-show="!modifyForm.user_id">该职员未注册系统账号</p>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="部门" prop="org" >
                        <Cascader :transfer="true" disabled  change-on-select :data="orgList" :load-data="loadOrgs" v-model="modifyForm.org"></Cascader>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="入职职位" prop="position_id" >
                        <Select v-model="modifyForm.position_id" disabled>
                          <Option v-for="p in positionList" :key="p.position_id" :value="p.position_id">{{p.position_name}}</Option>
                        </Select>
                      </FormItem>
                    </i-col>
                  </Row>
                  <Row>
                    <i-col span="8">
                        <FormItem label="职级">
                          <Input type="text" v-model="modifyForm.rank"></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="8">
                        <FormItem label="编制">
                          <Input type="text" v-model="modifyForm.organization"></Input>
                        </FormItem>
                      </i-col>
                      <i-col span="8">
                        <FormItem label="入职时间">
                          <DatePicker style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="modifyForm.entrydate" @on-change="setEntrydate"></DatePicker>
                        </FormItem>
                      </i-col>
                  </Row>
                  <Row>
                    <i-col span="8">
                      <FormItem label="转正时间">
                          <DatePicker style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="modifyForm.formaldate"  @on-change="setFormaldate"></DatePicker>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="在职状态">
                        <Select v-model="modifyForm.status">
                          <Option value="在职">在职</Option>
                          <Option value="离职">离职</Option>
                        </Select>
                      </FormItem>
                    </i-col>
                  </Row>
                  <Row >
                    <i-col span="8">
                      <FormItem label="系统账号" v-show="!modifyForm.user_id">
                        <i-switch size="large" v-model="sysAccountswitch">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </i-switch>
                      </FormItem>
                      <FormItem label="账号" v-show="sysAccountswitch === true">
                        <Input type="text" v-model="modifyForm.userName">
                        </Input>
                      </FormItem>
                    </i-col>
                  </Row>
                </Form>
              </TabPane>
              <TabPane label="个人信息">
                <Form  :model="modifyForm" label-position="right" :label-width="100">
                  <Row>
                    <div>
                      <i-col span="24">
                        <Row>
                          <i-col span="8">
                            <FormItem label="国籍">
                              <Input type="text" v-model="modifyForm.nationality">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="手机号">
                              <Input type="text" v-model="modifyForm.phone_num">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="身份证号">
                              <Input type="text" v-model="modifyForm.id_number">
                              </Input>
                            </FormItem>
                          </i-col>
                        </Row>
                        <Row>
                          <i-col span="8">
                            <FormItem label="籍贯">
                              <al-cascader v-model="origins" level="1"/>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="性别">
                              <Select v-model="modifyForm.sex">
                                <Option value="男">男</Option>
                                <Option value="女">女</Option>
                              </Select>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="出生日期">
                              <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="modifyForm.birth" @on-change="setBirth"></DatePicker> 
                            </FormItem>
                          </i-col>
                        </Row>
                        <Row>
                          <i-col span="8">
                            <FormItem label="司龄">
                              <Input type="text" v-model="modifyForm.division_time">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="民族">
                              <Select v-model="modifyForm.nation">
                                <Option v-for="n in data.nation" :key="n.id" :value="n.name">{{n.name}}</Option>
                              </Select>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="年龄">
                              <Input type="text" v-model="modifyForm.age">
                              </Input>
                            </FormItem>
                          </i-col>
                        </Row>
                        <Row>
                          <i-col span="8">
                            <FormItem label="QQ号">
                              <Input type="text" v-model="modifyForm.qq_num">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="政治面貌">
                              <Select v-model="modifyForm.political_status">
                                <Option value="党员">党员</Option>
                                <Option value="团员">团员</Option>
                                <Option value="群众">群众</Option>
                              </Select>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="婚否">
                              <Select v-model="modifyForm.married">
                                <Option value="是">是</Option>
                                <Option value="否">否</Option>
                              </Select>
                            </FormItem>
                          </i-col>
                        </Row>
                        <Row>
                          <i-col span="8">
                            <FormItem label="身份证地址">
                              <Input type="text" v-model="modifyForm.id_card_address">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="现家庭地址">
                              <Input type="text" v-model="modifyForm.current_address">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="户口性质">
                              <Select v-model="modifyForm.registered_nature">
                                <Option value="农村">农村</Option>
                                <Option value="城镇">城镇</Option>
                              </Select>
                            </FormItem>
                          </i-col>
                        </Row>
                        <Row>
                          <i-col span="8">
                            <FormItem label="私人邮箱">
                              <Input type="text" v-model="modifyForm.personal_email">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="公司邮箱">
                              <Input type="text" v-model="modifyForm.company_email">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="户口所在地地址">
                              <Input type="text" v-model="modifyForm.registered_address">
                              </Input>
                            </FormItem>
                          </i-col>
                        </Row>
                        <Row>
                          <i-col span="8">
                            <FormItem label="紧急联系人">
                              <Input type="text" v-model="modifyForm.emergency_contact">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="与紧急联系人关系">
                              <Input type="text" v-model="modifyForm.emergency_relationship">
                              </Input>
                            </FormItem>
                          </i-col>
                          <i-col span="8">
                            <FormItem label="紧急联系电话">
                              <Input type="text" v-model="modifyForm.emergency_phone">
                              </Input>
                            </FormItem>
                          </i-col>
                        </Row>
                      </i-col>
                    </div>
                  </Row>
                </Form>
              </TabPane>
              <TabPane label="教育信息">
                <Form  :model="modifyForm" label-position="right" :label-width="100">
                <Row>
                  <i-col span="8">
                    <FormItem label="最高学历">
                      <Input type="text" v-model="modifyForm.diploma_highest">
                        </Input>
                      </FormItem>
                  </i-col>
                </Row>
                <Row v-for="(item,index) in modifyForm.educations" :key="index">
                    <i-col span="8">
                      <FormItem label="教育开始时间">
                        <!-- <Input type="text" v-model="modifyForm.start"> -->
                        <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="item.start" @on-change="(data) => {setEduStart(data,index)}"></DatePicker>
                        </Input>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="教育结束时间">
                        <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="item.end" @on-change="(data) => {setEduEnd(data,index)}"></DatePicker>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="学习形式">
                        <Select v-model="item.modality">
                          <Option value="全日制">全日制</Option>
                          <Option value="脱产制">脱产制</Option>
                          <Option value="自考">自考</Option>
                        </Select>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="学校">
                        <Input type="text" v-model="item.school">
                        </Input>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="院系">
                        <Input type="text" v-model="item.college">
                        </Input>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="专业">
                        <Input type="text" v-model="item.major">
                        </Input>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="学历">
                        <Select v-model="item.diploma">
                          <Option value="博士研究生">博士研究生</Option>
                          <Option value="硕士研究生">硕士研究生</Option>
                          <Option value="本科">本科</Option>
                          <Option value="专科">专科</Option>
                          <Option value="其他">其他</Option>
                        </Select>
                        </Input>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="学位">
                        <Select v-model="item.degree">
                          <Option value="博士">博士</Option>
                          <Option value="硕士">硕士</Option>
                          <Option value="学士">学士</Option>
                          <Option value="其他">其他</Option>
                        </Select>
                      </FormItem>
                    </i-col>
                  </Row>
                  <i-col span="4" offset="4">
                      <Button type="dashed" icon="plus" @click="addEducationHandle">添加更多教育信息</Button>
                    </i-col>
                  </Form>
              </TabPane>
              <TabPane label="工作履历">
                <Form  :model="modifyForm" label-position="right" :label-width="100">
                    <i-col span="8">
                      <FormItem label="参加工作日期">
                        <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="modifyForm.join_work_date"></DatePicker>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="工作年限">
                        <Input type="text" v-model="modifyForm.work_time">
                        </Input>
                      </FormItem>
                    </i-col>
                  </Row>
                  <Row v-for="(item,index) in modifyForm.workhistories" :key="index">
                    <i-col span="8">
                      <FormItem label="开始时间">
                          <DatePicker type="date"  style="width: 222px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="item.start" @on-change="(data) => {setWorkStart(data,index)}"></DatePicker>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="结束时间">
                        <DatePicker type="date"  style="width: 222px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="item.end" @on-change="(data) => {setWorkEnd(data,index)}"></DatePicker>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="单位名称">
                         <Input type="text" v-model="item.company_name">
                        </Input>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="任职岗位">
                         <Input type="text" v-model="item.position_name">
                        </Input>
                      </FormItem>
                    </i-col>
                  </Row>
                  <Row>
                    <i-col span="4" offset="4">
                      <Button type="dashed" icon="plus" @click="addWorkHandle">添加工作经历</Button>
                    </i-col>
                  </Row>
                </Form>
              </TabPane>
              <TabPane label="证书管理">
                <Form  :model="modifyForm" label-position="right" :label-width="100">
                  <Row v-for="(item,index) in modifyForm.certificates" :key="index">
                    <i-col span="8">
                      <FormItem label="证书信息">
                        <Input type="text" v-model="item.certificate_name">
                        </Input>                     
                       </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="职称">
                        <Input type="text" v-model="item.certificate_position">
                        </Input> 
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="备注">
                        <Input type="text" v-model="item.remark">
                        </Input> 
                      </FormItem>
                    </i-col>
                  </Row>
                  <Row>
                    <i-col span="4" offset="4">
                      <Button type="dashed" icon="plus" @click="addCertificateHandle">添加证书信息</Button>
                    </i-col>
                  </Row>
                </Form>
              </TabPane>
              <TabPane label="银行卡信息">
                <Row>
                  <i-col span="16" offset="3">
                    <Form :model="modifyForm" label-position="right" :label-width="150">
                        <FormItem label="工资卡">
                            <Input v-model="modifyForm.wage_card_number"></Input>
                        </FormItem>
                        <FormItem label="工资卡开户行">
                            <Input v-model="modifyForm.wage_card_bank"></Input>
                        </FormItem>
                        <FormItem label="报销卡">
                            <Input v-model="modifyForm.reimbursement_card_number"></Input>
                        </FormItem>
                        <FormItem label="报销卡开户行">
                            <Input v-model="modifyForm.reimbursement_card_bank"></Input>
                        </FormItem>
                    </Form>
                  </i-col>
                </Row>
              </TabPane>
              <TabPane label="合同信息" >
                <Form  :model="modifyForm" label-position="right" :label-width="100">
                  <Row v-for="(i,index) in modifyForm.contracts" :key="index">
                    <i-col span="8">
                      <FormItem label="签订日期">
                        <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="i.start" @on-change="(data) => {setContractsStart(data,index)}"></DatePicker> 
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="签订年限">
                        <Input type="text" v-model="i.duration">
                        </Input> 
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="终止日期">
                        <DatePicker type="date"  style="width: 221px" format="yyyy-MM-dd" :transfer="true" placement="bottom-start" :value="i.end" @on-change="(data) => {setContractsEnd(data,index)}"></DatePicker> 
                      </FormItem>
                    </i-col>
                  </Row>
                  <Row>
                    <i-col span="4" offset="4">
                      <Button type="dashed" icon="plus" @click="addContracteHandle">添加合同信息</Button>
                    </i-col>
                  </Row>
                </Form>
              </TabPane>
              <!-- <TabPane label="相关附件" name="name8">相关附件的内容</TabPane> -->
          </Tabs>
      </Modal>
  </div>
</template>

<script>
  import data from "./column";
  import modifyDetailBtn from './component/access-detail-modify-button.vue';
  import alCascader from '@/views/my-components/area-linkage/components/al-cascader.vue';

export default {
  data () {
    return {
      modifyModalLoading:true,
      origins:[],
      data:data,
      sysAccountswitch:false,
      orgList:[],
      origins:[],
      positionList:[],
      employeeMes:{},
      modifyModal:false,
      ruleValidate:{
        org: [
          { required: true, type: 'array', message: '请选择部门', trigger: 'blur' }
        ],
        position_id:[
          { required: true, message: '请选择职位', trigger: 'blur' }
        ],
        employee_name:[
          { required: true, message: '请填写职工姓名', trigger: 'blur' }
        ],
      },
      modifyForm:{
          educations:[{
            start:'',
            end:''
          }],
          workhistories:[{
            start:'',
            end:''
          }],
          certificates:[{}],
          contracts:[{
            start:'',
            end:''
          }],
        },
    }
  },
  methods: {
    modify(employee_id) {
        this.modifyModal = true
        this.getPositions()
        this.getOrgs()
        this.$http.get('/hr/employee/' + employee_id ).then((res) => {
          this.modifyForm = res.data.returnValue
          this.modifyForm.org = JSON.parse(this.modifyForm.org_ids)
          this.origins= _.map(JSON.parse(this.modifyForm.origins),'code')
        })
      },
    goForward() {
      this.$router.go(-1)
    },
    getPositions() {
      this.$http.get('/hr/positions').then((res) => {
        this.positionList = res.data
      })
    },
    getOrgs() {
      this.$http.get('/hr/orglist').then((res) => {
        this.orgList = _.map(res.data, o => {
          o.value = o.org_id
          o.label = o.org_name
          this.$http.get('/hr/orglist?org_id=' + o.org_id).then((res) => {
            if(res.data.length !== 0) {
              o.loading = false
              o.children = []
            }
          })
          return o
        })
      })
    },
    loadOrgs(item,callback) {
      item.loading = true;
      this.$http.get('/hr/orglist?org_id=' + item.org_id).then((res) => {
        item.loading = false;
        res.data.forEach(r => {
          r.value = r.org_id
          r.label = r.org_name
          this.$http.get('/hr/orglist?org_id='+ r.org_id).then((res) => {
            if(res.data.length !== 0) {
              r.loading = false
              r.children = []
            }
          })
        return r
      })
        item.children = res.data
        item.loading = false;
        callback()
      })
    },
    setEntrydate(value) {
      this.modifyForm.entrydate = value
    },
    setFormaldate(value) {
      this.modifyForm.formaldate = value
    },
    setBirth(value) {
      this.modifyForm.birth = value
    },
    setEduStart(value,index) {
      this.modifyForm.educations[index].start = value
    },
    setEduEnd(value,index) {
      this.modifyForm.educations[index].end = value
    },
    setJoinWorkDate(value) {
      this.modifyForm.join_work_date = value
    },
    setWorkStart(value,index) {
      this.modifyForm.workhistories[index].start = value
    },
    setWorkEnd(value,index) {
      this.modifyForm.workhistories[index].end = value
    },
    setContractsStart(value,index) {
      this.modifyForm.contracts[index].start = value
    },
    setContractsEnd(value,index) {
      this.modifyForm.contracts[index].end = value
    },
    submitModify(name) {
      this.$refs[name].validate((valid) => {
          if(valid) {
            this.modifyForm.org_id = this.modifyForm.org[this.modifyForm.org.length - 1]
            this.modifyForm.org_ids = JSON.stringify(this.modifyForm.org)
            delete this.modifyForm.org_name
            delete this.modifyForm.origins
            console.info(this.modifyForm)
            this.$http.put('/hr/employee',this.modifyForm).then((res) => {
              this.$Message.success('员工信息修改成功！')
              this.modifyModal = false
              this.getEmployee(this.$route.query)
            }).catch(() => {
              this.$Message.error('修改失败，请重试！')
            })
          }else {
            this.modifyModalLoading = false
            this.$nextTick(() => {
              this.modifyModalLoading = true
            })
          }
        })
    },
    cancel() {

    },
    addContracteHandle() {
      this.modifyForm.contracts.push({
        start:'',
        duration:'',
        end:''
      })
    },
    addEducationHandle() {
      this.modifyForm.educations.push({
        start:'',
        end:'',
        modality:'',
        school:'',
        college:'',
        major:'',
        diploma:'',
        degree:'',
      })
    },
    addWorkHandle() {
      this.modifyForm.workhistories.push({
        start:'',
        start:'',
        work_name:'',
        work_position:''
      })
    },
    addCertificateHandle() {
      this.modifyForm.certificates.push({
        certificate_name:'',
        certificate_position:'',
        remark:''
      })
    },
    getEmployee(id) {
      this.$http.get('/hr/employee/'+id).then((res) => {
        this.employeeMes = res.data.returnValue
        this.employeeMes.origins= _.map(JSON.parse(this.employeeMes.origins),'name').join('/')
      })
    }
  },
  components: {
    alCascader,
    modifyDetailBtn
  },
  mounted () {
   this.getEmployee(this.$route.params.id)
  }
}
</script>

